<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 花礼相伴</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background-color: #f8f8f8;
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 主体内容 -->
    <div class="min-h-screen flex flex-col">
        <!-- 导航栏 -->
        <header class="bg-white p-4 border-b border-gray-200 shadow-sm">
            <div class="container mx-auto flex items-center justify-between">
                <a href="home.html" class="text-2xl font-bold text-rose-500 flex items-center">
                    <i class="fas fa-flower text-rose-500 mr-2"></i>
                    花礼相伴
                </a>
                <div class="hidden lg:block w-1/3">
                    <div class="relative">
                        <input type="text" placeholder="搜索鲜花、场景..." 
                            class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
                        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                </div>
                <nav class="hidden md:flex space-x-6">
                    <a href="home.html" class="text-rose-500 hover:text-rose-600 font-medium">首页</a>
                    <a href="categories.html" class="text-gray-600 hover:text-rose-500">分类</a>
                    <a href="cart.html" class="text-gray-600 hover:text-rose-500">购物车</a>
                </nav>
                <div class="flex items-center space-x-4">
                    <a href="cart.html" class="p-2 relative">
                        <i class="fas fa-shopping-cart text-gray-600 text-xl"></i>
                        <span class="absolute top-0 right-0 bg-rose-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">3</span>
                    </a>
                    <a href="login.html" class="hidden md:block text-gray-600 hover:text-rose-500">登录</a>
                    <a href="register.html" class="hidden md:block text-white bg-rose-500 px-4 py-2 rounded-lg hover:bg-rose-600 transition duration-300">注册</a>
                </div>
            </div>
            <!-- 移动端搜索栏 -->
            <div class="mt-3 relative md:hidden">
                <input type="text" placeholder="搜索鲜花、场景..." 
                    class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
        </header>

        <!-- 主体内容区域 -->
        <main class="flex-grow">
            <!-- 轮播图 -->
            <section class="relative bg-white">
                <div class="overflow-hidden h-48 md:h-80 lg:h-96">
                    <!-- 图片来源: https://unsplash.com/photos/a-vase-filled-with-flowers-sitting-on-top-of-a-wooden-table-nIn57JCQIhc -->
                    <img src="https://images.unsplash.com/photo-1591279304658-b894b00c0a87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80" 
                        alt="鲜花促销" class="w-full h-full object-cover">
                </div>
                <div class="absolute bottom-2 left-0 right-0 flex justify-center gap-1">
                    <span class="w-2 h-2 bg-rose-500 rounded-full"></span>
                    <span class="w-2 h-2 bg-gray-300 rounded-full"></span>
                    <span class="w-2 h-2 bg-gray-300 rounded-full"></span>
                </div>
            </section>

            <div class="container mx-auto px-4 py-8">
                <!-- 商品分类 -->
                <section class="p-4 md:p-6 bg-white rounded-lg shadow-sm mb-8">
                    <h2 class="text-lg md:text-xl font-bold mb-4">商品分类</h2>
                    <div class="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-8 gap-3 md:gap-6">
                        <a href="categories.html" class="text-center">
                            <div class="bg-rose-100 rounded-full h-14 w-14 md:h-20 md:w-20 flex items-center justify-center mx-auto mb-1">
                                <i class="fas fa-heart text-rose-500 text-lg md:text-2xl"></i>
                            </div>
                            <span class="text-sm md:text-base">爱情鲜花</span>
                        </a>
                        <a href="categories.html" class="text-center">
                            <div class="bg-blue-100 rounded-full h-14 w-14 md:h-20 md:w-20 flex items-center justify-center mx-auto mb-1">
                                <i class="fas fa-birthday-cake text-blue-500 text-lg md:text-2xl"></i>
                            </div>
                            <span class="text-sm md:text-base">生日鲜花</span>
                        </a>
                        <a href="categories.html" class="text-center">
                            <div class="bg-yellow-100 rounded-full h-14 w-14 md:h-20 md:w-20 flex items-center justify-center mx-auto mb-1">
                                <i class="fas fa-dove text-yellow-500 text-lg md:text-2xl"></i>
                            </div>
                            <span class="text-sm md:text-base">友情鲜花</span>
                        </a>
                        <a href="categories.html" class="text-center">
                            <div class="bg-green-100 rounded-full h-14 w-14 md:h-20 md:w-20 flex items-center justify-center mx-auto mb-1">
                                <i class="fas fa-seedling text-green-500 text-lg md:text-2xl"></i>
                            </div>
                            <span class="text-sm md:text-base">全部分类</span>
                        </a>
                        <!-- 仅在大屏幕上显示的额外分类 -->
                        <a href="categories.html" class="text-center hidden md:block">
                            <div class="bg-purple-100 rounded-full md:h-20 md:w-20 flex items-center justify-center mx-auto mb-1">
                                <i class="fas fa-graduation-cap text-purple-500 text-2xl"></i>
                            </div>
                            <span class="text-base">毕业鲜花</span>
                        </a>
                        <a href="categories.html" class="text-center hidden md:block">
                            <div class="bg-pink-100 rounded-full md:h-20 md:w-20 flex items-center justify-center mx-auto mb-1">
                                <i class="fas fa-hands-helping text-pink-500 text-2xl"></i>
                            </div>
                            <span class="text-base">祝福鲜花</span>
                        </a>
                        <a href="categories.html" class="text-center hidden md:block">
                            <div class="bg-amber-100 rounded-full md:h-20 md:w-20 flex items-center justify-center mx-auto mb-1">
                                <i class="fas fa-home text-amber-500 text-2xl"></i>
                            </div>
                            <span class="text-base">开业花篮</span>
                        </a>
                        <a href="categories.html" class="text-center hidden md:block">
                            <div class="bg-teal-100 rounded-full md:h-20 md:w-20 flex items-center justify-center mx-auto mb-1">
                                <i class="fas fa-gift text-teal-500 text-2xl"></i>
                            </div>
                            <span class="text-base">礼品鲜花</span>
                        </a>
                    </div>
                </section>

                <!-- 热门推荐 -->
                <section class="p-4 md:p-6 bg-white rounded-lg shadow-sm mb-8">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg md:text-xl font-bold">热门推荐</h2>
                        <a href="categories.html" class="text-sm md:text-base text-gray-500 hover:text-rose-500">查看更多 <i class="fas fa-angle-right"></i></a>
                    </div>
                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
                        <a href="product-detail.html" class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300">
                            <!-- 图片来源: https://unsplash.com/photos/a-bouquet-of-flowers-with-colorful-roses-in-it-7e9KaLQ9j0g -->
                            <img src="https://images.unsplash.com/photo-1586968895917-80585d521b92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
                                alt="红玫瑰花束" class="w-full h-36 md:h-48 object-cover">
                            <div class="p-3 md:p-4">
                                <h3 class="font-medium md:text-lg truncate">浪漫红玫瑰花束</h3>
                                <p class="text-rose-500 font-bold mt-1 md:mt-2 md:text-lg">¥199</p>
                            </div>
                        </a>
                        <a href="product-detail.html" class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300">
                            <!-- 图片来源: https://unsplash.com/photos/a-bunch-of-roses-in-a-vase-JWUwmm0Wh5I -->
                            <img src="https://images.unsplash.com/photo-1533616688419-b7a585564566?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
                                alt="混合鲜花花束" class="w-full h-36 md:h-48 object-cover">
                            <div class="p-3 md:p-4">
                                <h3 class="font-medium md:text-lg truncate">缤纷混合花束</h3>
                                <p class="text-rose-500 font-bold mt-1 md:mt-2 md:text-lg">¥259</p>
                            </div>
                        </a>
                        <!-- 仅在中等及以上屏幕显示的商品 -->
                        <a href="product-detail.html" class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300 hidden md:block">
                            <!-- 图片来源: https://unsplash.com/photos/yellow-and-pink-flower-bouquet-csqNh-MgJ8Y -->
                            <img src="https://images.unsplash.com/photo-1563241527-3004b7be0ffd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
                                alt="向日葵花束" class="w-full h-48 object-cover">
                            <div class="p-4">
                                <h3 class="font-medium text-lg truncate">阳光向日葵花束</h3>
                                <p class="text-rose-500 font-bold mt-2 text-lg">¥229</p>
                            </div>
                        </a>
                        <!-- 仅在大屏幕显示的商品 -->
                        <a href="product-detail.html" class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300 hidden lg:block">
                            <!-- 图片来源: https://unsplash.com/photos/multi-colored-flower-bouquet-close-up-photography-Pwk0IZoYeyY -->
                            <img src="https://images.unsplash.com/photo-1526047932273-341f2a7631f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
                                alt="郁金香花束" class="w-full h-48 object-cover">
                            <div class="p-4">
                                <h3 class="font-medium text-lg truncate">彩色郁金香花束</h3>
                                <p class="text-rose-500 font-bold mt-2 text-lg">¥289</p>
                            </div>
                        </a>
                    </div>
                </section>

                <!-- 节日/场景推荐 -->
                <section class="p-4 md:p-6 bg-white rounded-lg shadow-sm">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg md:text-xl font-bold">场景推荐</h2>
                        <a href="categories.html" class="text-sm md:text-base text-gray-500 hover:text-rose-500">查看更多 <i class="fas fa-angle-right"></i></a>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
                        <a href="categories.html" class="block relative rounded-lg overflow-hidden h-24 md:h-40">
                            <!-- 图片来源: https://unsplash.com/photos/person-holding-red-roses-photo-Cj0tN6DXqEU -->
                            <img src="https://images.unsplash.com/photo-1549576490-b0b4831ef60a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                                alt="情人节专题" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center p-4">
                                <div>
                                    <h3 class="text-white font-bold text-lg md:text-xl lg:text-2xl">情人节专题</h3>
                                    <p class="text-white text-sm md:text-base opacity-90">表达爱意，从一束花开始</p>
                                </div>
                            </div>
                        </a>
                        <a href="categories.html" class="block relative rounded-lg overflow-hidden h-24 md:h-40">
                            <!-- 图片来源: https://unsplash.com/photos/assorted-color-tulip-flowers-Y7iKwokbzx0 -->
                            <img src="https://images.unsplash.com/photo-1523694576729-96116a39d392?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                                alt="母亲节专题" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center p-4">
                                <div>
                                    <h3 class="text-white font-bold text-lg md:text-xl lg:text-2xl">母亲节专题</h3>
                                    <p class="text-white text-sm md:text-base opacity-90">感谢养育之恩</p>
                                </div>
                            </div>
                        </a>
                        <!-- 仅在大屏幕显示 -->
                        <a href="categories.html" class="block relative rounded-lg overflow-hidden h-40 hidden lg:block">
                            <!-- 图片来源: https://unsplash.com/photos/pink-and-white-flower-bouquet-in-clear-glass-vase-0cCIR_T3-hk -->
                            <img src="https://images.unsplash.com/photo-1589244159943-d873888bd414?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                                alt="毕业季专题" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center p-4">
                                <div>
                                    <h3 class="text-white font-bold text-2xl">毕业季专题</h3>
                                    <p class="text-white text-base opacity-90">青春不散场，情谊永相伴</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </section>
            </div>
        </main>

        <!-- 底部导航栏 - 移动端 -->
        <footer class="md:hidden mt-auto bg-white border-t border-gray-200">
            <div class="flex justify-around py-2">
                <a href="home.html" class="flex flex-col items-center px-4 py-2 text-rose-500">
                    <i class="fas fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="categories.html" class="flex flex-col items-center px-4 py-2 text-gray-500">
                    <i class="fas fa-th-large text-lg"></i>
                    <span class="text-xs mt-1">分类</span>
                </a>
                <a href="cart.html" class="flex flex-col items-center px-4 py-2 text-gray-500">
                    <i class="fas fa-shopping-cart text-lg"></i>
                    <span class="text-xs mt-1">购物车</span>
                </a>
                <a href="profile.html" class="flex flex-col items-center px-4 py-2 text-gray-500">
                    <i class="fas fa-user text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </footer>

        <!-- 页脚 - PC端 -->
        <footer class="hidden md:block bg-white border-t border-gray-200 py-8 mt-12">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <div>
                        <h4 class="text-lg font-bold mb-4">关于我们</h4>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-600 hover:text-rose-500">公司简介</a></li>
                            <li><a href="#" class="text-gray-600 hover:text-rose-500">企业文化</a></li>
                            <li><a href="#" class="text-gray-600 hover:text-rose-500">门店地址</a></li>
                            <li><a href="#" class="text-gray-600 hover:text-rose-500">联系我们</a></li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="text-lg font-bold mb-4">新手帮助</h4>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-600 hover:text-rose-500">购物指南</a></li>
                            <li><a href="#" class="text-gray-600 hover:text-rose-500">配送方式</a></li>
                            <li><a href="#" class="text-gray-600 hover:text-rose-500">支付方式</a></li>
                            <li><a href="#" class="text-gray-600 hover:text-rose-500">常见问题</a></li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="text-lg font-bold mb-4">商家合作</h4>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-600 hover:text-rose-500">入驻申请</a></li>
                            <li><a href="#" class="text-gray-600 hover:text-rose-500">商家规则</a></li>
                            <li><a href="#" class="text-gray-600 hover:text-rose-500">商家中心</a></li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="text-lg font-bold mb-4">联系我们</h4>
                        <div class="flex items-center mb-3">
                            <i class="fas fa-phone text-rose-500 mr-2"></i>
                            <span>客服热线: 400-123-4567</span>
                        </div>
                        <div class="flex items-center mb-3">
                            <i class="fas fa-envelope text-rose-500 mr-2"></i>
                            <span>邮箱: service@hualiflower.com</span>
                        </div>
                        <div class="flex space-x-4 mt-4">
                            <a href="#" class="text-gray-500 hover:text-rose-500">
                                <i class="fab fa-weixin text-2xl"></i>
                            </a>
                            <a href="#" class="text-gray-500 hover:text-rose-500">
                                <i class="fab fa-weibo text-2xl"></i>
                            </a>
                            <a href="#" class="text-gray-500 hover:text-rose-500">
                                <i class="fas fa-envelope text-2xl"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="border-t border-gray-200 mt-8 pt-8 text-center">
                    <p class="text-gray-600">&copy; 2023 花礼相伴鲜花配送网站. 所有权利保留.</p>
                </div>
            </div>
        </footer>
    </div>
</body>
</html>